<template>
  <div class="custom-container">
    <h1 class="page-title">自定义资源生成</h1>
    
    <!-- 输入区 -->
    <div class="input-section" v-if="!isGenerating && !customResult">
      <div class="form-group">
        <label>资源名称</label>
        <input 
          type="text" 
          v-model="formData.title" 
          placeholder="请输入资源名称"
        >
      </div>
      
      <div class="form-group">
        <label>资源类型</label>
        <div class="resource-type-selector">
          <div 
            v-for="type in resourceTypes" 
            :key="type.value"
            :class="['type-item', { active: formData.resourceType === type.value }]"
            @click="selectResourceType(type.value)"
          >
            <div class="type-icon">{{ type.icon }}</div>
            <div class="type-name">{{ type.label }}</div>
          </div>
        </div>
      </div>
      
      <div class="form-group">
        <label>资源描述</label>
        <textarea 
          v-model="formData.description" 
          placeholder="请简要描述您需要生成的资源内容和用途"
          rows="3"
        ></textarea>
      </div>
      
      <!-- 动态表单字段 -->
      <div class="dynamic-fields">
        <template v-if="formData.resourceType === 'courseware'">
          <div class="form-group">
            <label>课件格式</label>
            <select v-model="formData.format">
              <option value="">请选择格式</option>
              <option value="ppt">PowerPoint</option>
              <option value="word">Word文档</option>
              <option value="pdf">PDF文档</option>
              <option value="html">HTML网页</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>课件主题</label>
            <input 
              type="text" 
              v-model="formData.topic" 
              placeholder="请输入课件主题"
            >
          </div>
          
          <div class="form-group">
            <label>课件大纲</label>
            <div class="outline-editor">
              <div 
                v-for="(item, index) in formData.outline" 
                :key="index"
                class="outline-item"
              >
                <input 
                  type="text" 
                  v-model="formData.outline[index]" 
                  placeholder="请输入大纲项"
                >
                <button 
                  class="remove-btn" 
                  @click="removeOutlineItem(index)"
                  v-if="formData.outline.length > 1"
                >
                  ×
                </button>
              </div>
              <button class="add-btn" @click="addOutlineItem">+ 添加大纲项</button>
            </div>
          </div>
          
          <div class="form-group">
            <label>风格偏好</label>
            <select v-model="formData.style">
              <option value="">请选择风格</option>
              <option value="academic">学术型</option>
              <option value="concise">简洁型</option>
              <option value="visual">图文并茂型</option>
              <option value="interactive">互动型</option>
            </select>
          </div>
        </template>
        
        <template v-else-if="formData.resourceType === 'handout'">
          <div class="form-group">
            <label>学科</label>
            <select v-model="formData.subject">
              <option value="">请选择学科</option>
              <option 
                v-for="subject in subjects" 
                :key="subject.value" 
                :value="subject.value"
              >
                {{ subject.label }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label>知识点</label>
            <div class="tags-input">
              <div class="tags-container">
                <div 
                  v-for="(tag, index) in formData.keyPoints" 
                  :key="index"
                  class="tag-item"
                >
                  {{ tag }}
                  <span class="remove-tag" @click="removeKeyPoint(index)">×</span>
                </div>
              </div>
              <div class="tag-input-container">
                <input 
                  type="text" 
                  v-model="newKeyPoint" 
                  placeholder="输入知识点后按回车添加"
                  @keyup.enter="addKeyPoint"
                >
                <button class="add-tag-btn" @click="addKeyPoint">添加</button>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <label>难度级别</label>
            <div class="difficulty-selector">
              <div 
                v-for="level in difficultyLevels" 
                :key="level.value"
                :class="['difficulty-item', { active: formData.difficulty === level.value }]"
                @click="formData.difficulty = level.value"
              >
                {{ level.label }}
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <label>包含内容</label>
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.includeDefinitions">
                <span>概念定义</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.includeExamples">
                <span>例题讲解</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.includePractice">
                <span>练习题</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.includeReferences">
                <span>参考资料</span>
              </label>
            </div>
          </div>
        </template>
        
        <template v-else-if="formData.resourceType === 'plan'">
          <div class="form-group">
            <label>计划类型</label>
            <select v-model="formData.planType">
              <option value="">请选择计划类型</option>
              <option value="lesson">单课时教案</option>
              <option value="unit">单元教学计划</option>
              <option value="semester">学期教学计划</option>
              <option value="activity">教学活动设计</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>学科</label>
            <select v-model="formData.subject">
              <option value="">请选择学科</option>
              <option 
                v-for="subject in subjects" 
                :key="subject.value" 
                :value="subject.value"
              >
                {{ subject.label }}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label>教学目标</label>
            <div class="goals-editor">
              <div 
                v-for="(goal, index) in formData.goals" 
                :key="index"
                class="goal-item"
              >
                <input 
                  type="text" 
                  v-model="formData.goals[index]" 
                  placeholder="请输入教学目标"
                >
                <button 
                  class="remove-btn" 
                  @click="removeGoal(index)"
                  v-if="formData.goals.length > 1"
                >
                  ×
                </button>
              </div>
              <button class="add-btn" @click="addGoal">+ 添加教学目标</button>
            </div>
          </div>
          
          <div class="form-group">
            <label>教学对象</label>
            <select v-model="formData.audience">
              <option value="">请选择教学对象</option>
              <option value="primary">小学生</option>
              <option value="junior">初中生</option>
              <option value="senior">高中生</option>
              <option value="college">大学生</option>
              <option value="adult">成人教育</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>教学方法偏好</label>
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.lecture">
                <span>讲授法</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.discussion">
                <span>讨论法</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.experiment">
                <span>实验法</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.inquiry">
                <span>探究法</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.cooperative">
                <span>合作学习</span>
              </label>
            </div>
          </div>
        </template>
        
        <template v-else-if="formData.resourceType === 'evaluation'">
          <div class="form-group">
            <label>评价类型</label>
            <select v-model="formData.evaluationType">
              <option value="">请选择评价类型</option>
              <option value="diagnostic">诊断性评价</option>
              <option value="formative">形成性评价</option>
              <option value="summative">总结性评价</option>
              <option value="performance">表现性评价</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>评价对象</label>
            <select v-model="formData.evaluationTarget">
              <option value="">请选择评价对象</option>
              <option value="student">学生</option>
              <option value="teacher">教师</option>
              <option value="course">课程</option>
              <option value="activity">教学活动</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>评价维度</label>
            <div class="dimensions-editor">
              <div 
                v-for="(dimension, index) in formData.dimensions" 
                :key="index"
                class="dimension-item"
              >
                <input 
                  type="text" 
                  v-model="formData.dimensions[index].name" 
                  placeholder="评价维度名称"
                  class="dimension-name"
                >
                <input 
                  type="number" 
                  v-model.number="formData.dimensions[index].weight" 
                  placeholder="权重"
                  min="1"
                  max="100"
                  class="dimension-weight"
                >
                <span class="weight-percent">%</span>
                <button 
                  class="remove-btn" 
                  @click="removeDimension(index)"
                  v-if="formData.dimensions.length > 1"
                >
                  ×
                </button>
              </div>
              <button class="add-btn" @click="addDimension">+ 添加评价维度</button>
            </div>
          </div>
          
          <div class="form-group">
            <label>评价方法</label>
            <div class="checkbox-group">
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.test">
                <span>测试</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.observation">
                <span>观察</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.interview">
                <span>访谈</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.portfolio">
                <span>档案袋</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.selfEvaluation">
                <span>自评</span>
              </label>
              <label class="checkbox-item">
                <input type="checkbox" v-model="formData.methods.peerEvaluation">
                <span>互评</span>
              </label>
            </div>
          </div>
        </template>
        
        <template v-else>
          <!-- 默认字段，适用于其他资源类型 -->
          <div class="form-group">
            <label>资源内容</label>
            <textarea 
              v-model="formData.content" 
              placeholder="请详细描述您需要的资源内容"
              rows="6"
            ></textarea>
          </div>
          
          <div class="form-group">
            <label>适用对象</label>
            <select v-model="formData.audience">
              <option value="">请选择适用对象</option>
              <option value="primary">小学生</option>
              <option value="junior">初中生</option>
              <option value="senior">高中生</option>
              <option value="college">大学生</option>
              <option value="teacher">教师</option>
              <option value="adult">成人教育</option>
            </select>
          </div>
        </template>
      </div>
      
      <div class="form-group">
        <label>附加说明</label>
        <textarea 
          v-model="formData.additionalInfo" 
          placeholder="可选：添加任何其他需求或说明"
          rows="3"
        ></textarea>
      </div>
      
      <button 
        class="generate-btn" 
        :disabled="!isFormValid" 
        @click="generateResource"
      >
        确认输入，生成资源
      </button>
    </div>
    
    <!-- 加载状态 -->
    <div class="loading-section" v-if="isGenerating">
      <div class="loading-spinner"></div>
      <p>正在生成自定义资源，请稍候...</p>
      <p class="loading-hint">根据您的需求定制资源内容，这可能需要一些时间</p>
    </div>
    
    <!-- 结果预览区 -->
    <div class="result-section" v-if="customResult">
      <div class="result-header">
        <h2 class="result-title">{{ customResult.title }}</h2>
        <div class="result-meta">
          <div class="meta-item">类型：{{ getResourceTypeLabel() }}</div>
          <div class="meta-item">创建时间：{{ customResult.createdAt }}</div>
        </div>
      </div>
      
      <div class="result-content">
        <!-- 课件预览 -->
        <template v-if="customResult.resourceType === 'courseware'">
          <div class="preview-card">
            <div class="preview-header">
              <h3>课件预览</h3>
              <div class="preview-format">格式：{{ getFormatLabel() }}</div>
            </div>
            
            <div class="preview-body">
              <div class="courseware-preview">
                <div class="slide-preview">
                  <div class="slide-title">{{ customResult.title }}</div>
                  <div class="slide-content">
                    <div v-for="(item, index) in customResult.outline" :key="index" class="slide-item">
                      <div class="slide-item-title">{{ item.title }}</div>
                      <div class="slide-item-content" v-if="item.content">
                        <div v-for="(point, pIndex) in item.content" :key="pIndex" class="slide-point">
                          • {{ point }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="preview-card">
            <div class="preview-header">
              <h3>课件说明</h3>
            </div>
            
            <div class="preview-body">
              <div class="info-item">
                <div class="info-label">主题：</div>
                <div class="info-value">{{ customResult.topic }}</div>
              </div>
              
              <div class="info-item">
                <div class="info-label">风格：</div>
                <div class="info-value">{{ getStyleLabel() }}</div>
              </div>
              
              <div class="info-item">
                <div class="info-label">大纲：</div>
                <div class="info-value outline-list">
                  <div v-for="(item, index) in customResult.outline" :key="index" class="outline-list-item">
                    {{ index + 1 }}. {{ item.title }}
                  </div>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-label">使用建议：</div>
                <div class="info-value">{{ customResult.usageSuggestions }}</div>
              </div>
            </div>
          </div>
        </template>
        
        <!-- 讲义预览 -->
        <template v-else-if="customResult.resourceType === 'handout'">
          <div class="preview-card">
            <div class="preview-header">
              <h3>讲义预览</h3>
              <div class="preview-subject">学科：{{ getSubjectLabel() }}</div>
            </div>
            
            <div class="preview-body">
              <div class="handout-preview">
                <div class="handout-section">
                  <h4 class="handout-section-title">概述</h4>
                  <div class="handout-section-content">{{ customResult.overview }}</div>
                </div>
                
                <div v-if="customResult.definitions && customResult.definitions.length > 0" class="handout-section">
                  <h4 class="handout-section-title">概念定义</h4>
                  <div class="handout-section-content">
                    <div v-for="(def, index) in customResult.definitions" :key="index" class="definition-item">
                      <div class="definition-term">{{ def.term }}</div>
                      <div class="definition-desc">{{ def.description }}</div>
                    </div>
                  </div>
                </div>
                
                <div v-if="customResult.examples && customResult.examples.length > 0" class="handout-section">
                  <h4 class="handout-section-title">例题讲解</h4>
                  <div class="handout-section-content">
                    <div v-for="(example, index) in customResult.examples" :key="index" class="example-item">
                      <div class="example-question">例{{ index + 1 }}：{{ example.question }}</div>
                      <div class="example-solution">解析：{{ example.solution }}</div>
                    </div>
                  </div>
                </div>
                
                <div v-if="customResult.practice && customResult.practice.length > 0" class="handout-section">
                  <h4 class="handout-section-title">练习题</h4>
                  <div class="handout-section-content">
                    <div v-for="(practice, index) in customResult.practice" :key="index" class="practice-item">
                      {{ index + 1 }}. {{ practice }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="preview-card">
            <div class="preview-header">
              <h3>讲义信息</h3>
            </div>
            
            <div class="preview-body">
              <div class="info-item">
                <div class="info-label">知识点：</div>
                <div class="info-value">
                  <div class="tags-list">
                    <div v-for="(point, index) in customResult.keyPoints" :key="index" class="tag">
                      {{ point }}
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-label">难度级别：</div>
                <div class="info-value">{{ getDifficultyLabel() }}</div>
              </div>
              
              <div class="info-item">
                <div class="info-label">包含内容：</div>
                <div class="info-value">
                  <div class="tags-list">
                    <div v-if="customResult.includeDefinitions" class="tag">概念定义</div>
                    <div v-if="customResult.includeExamples" class="tag">例题讲解</div>
                    <div v-if="customResult.includePractice" class="tag">练习题</div>
                    <div v-if="customResult.includeReferences" class="tag">参考资料</div>
                  </div>
                </div>
              </div>
              
              <div v-if="customResult.references && customResult.references.length > 0" class="info-item">
                <div class="info-label">参考资料：</div>
                <div class="info-value">
                  <div v-for="(ref, index) in customResult.references" :key="index" class="reference-item">
                    {{ index + 1 }}. {{ ref }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        
        <!-- 教学计划预览 -->
        <template v-else-if="customResult.resourceType === 'plan'">
          <div class="preview-card">
            <div class="preview-header">
              <h3>{{ getPlanTypeLabel() }}预览</h3>
              <div class="preview-subject">学科：{{ getSubjectLabel() }}</div>
            </div>
            
            <div class="preview-body">
              <div class="plan-preview">
                <div class="plan-section">
                  <h4 class="plan-section-title">教学目标</h4>
                  <div class="plan-section-content">
                    <div v-for="(goal, index) in customResult.goals" :key="index" class="goal-item">
                      {{ index + 1 }}. {{ goal }}
                    </div>
                  </div>
                </div>
                
                <div class="plan-section">
                  <h4 class="plan-section-title">教学对象</h4>
                  <div class="plan-section-content">{{ getAudienceLabel() }}</div>
                </div>
                
                <div class="plan-section">
                  <h4 class="plan-section-title">教学内容</h4>
                  <div class="plan-section-content">
                    <div v-for="(content, index) in customResult.contents" :key="index" class="content-item">
                      <div class="content-title">{{ content.title }}</div>
                      <div class="content-desc">{{ content.description }}</div>
                    </div>
                  </div>
                </div>
                
                <div class="plan-section">
                  <h4 class="plan-section-title">教学过程</h4>
                  <div class="plan-section-content">
                    <div v-for="(step, index) in customResult.steps" :key="index" class="step-item">
                      <div class="step-title">{{ step.title }}</div>
                      <div class="step-desc">{{ step.description }}</div>
                      <div v-if="step.activities && step.activities.length > 0" class="step-activities">
                        <div v-for="(activity, aIndex) in step.activities" :key="aIndex" class="activity-item">
                          - {{ activity }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="preview-card">
            <div class="preview-header">
              <h3>计划信息</h3>
            </div>
            
            <div class="preview-body">
              <div class="info-item">
                <div class="info-label">教学方法：</div>
                <div class="info-value">
                  <div class="tags-list">
                    <div v-if="customResult.methods.lecture" class="tag">讲授法</div>
                    <div v-if="customResult.methods.discussion" class="tag">讨论法</div>
                    <div v-if="customResult.methods.experiment" class="tag">实验法</div>
                    <div v-if="customResult.methods.inquiry" class="tag">探究法</div>
                    <div v-if="customResult.methods.cooperative" class="tag">合作学习</div>
                  </div>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-label">教学资源：</div>
                <div class="info-value">
                  <div v-for="(resource, index) in customResult.resources" :key="index" class="resource-item">
                    {{ index + 1 }}. {{ resource }}
                  </div>
                </div>
              </div>
              
              <div class="info-item">
                <div class="info-label">评价方式：</div>
                <div class="info-value">{{ customResult.evaluation }}</div>
              </div>
            </div>
          </div>
        </template>
        
        <!-- 评价工具预览 -->
        <template v-else-if="customResult.resourceType === 'evaluation'">
          <div class="preview-card">
            <div class="preview-header">
              <h3>{{ getEvaluationTypeLabel() }}预览</h3>
              <div class="preview-target">评价对象：{{ getEvaluationTargetLabel() }}</div>
            </div>
            
            <div class="preview-body">
              <div class="evaluation-preview">
                <div class="evaluation-section">
                  <h4 class="evaluation-section-title">评价目的</h4>
                  <div class="evaluation-section-content">{{ customResult.purpose }}</div>
                </div>
                
                <div class="evaluation-section">
                  <h4 class="evaluation-section-title">评价维度</h4>
                  <div class="evaluation-section-content">
                    <div class="dimensions-table">
                      <div class="dimensions-header">
                        <div class="dimension-cell">维度</div>
                        <div class="weight-cell">权重</div>
                        <div class="criteria-cell">评价标准</div>
                      </div>
                      <div 
                        v-for="(dimension, index) in customResult.dimensions" 
                        :key="index"
                        class="dimension-row"
                      >
                        <div class="dimension-cell">{{ dimension.name }}</div>
                        <div class="weight-cell">{{ dimension.weight }}%</div>
                        <div class="criteria-cell">
                          <div v-for="(criterion, cIndex) in dimension.criteria" :key="cIndex" class="criterion-item">
                            - {{ criterion }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="evaluation-section">
                  <h4 class="evaluation-section-title">评价方法</h4>
                  <div class="evaluation-section-content">
                    <div class="tags-list">
                      <div v-if="customResult.methods.test" class="tag">测试</div>
                      <div v-if="customResult.methods.observation" class="tag">观察</div>
                      <div v-if="customResult.methods.interview" class="tag">访谈</div>
                      <div v-if="customResult.methods.portfolio" class="tag">档案袋</div>
                      <div v-if="customResult.methods.selfEvaluation" class="tag">自评</div>
                      <div v-if="customResult.methods.peerEvaluation" class="tag">互评</div>
                    </div>
                  </div>
                </div>
                
                <div class="evaluation-section">
                  <h4 class="evaluation-section-title">评价工具</h4>
                  <div class="evaluation-section-content">
                    <div v-for="(tool, index) in customResult.tools" :key="index" class="tool-item">
                      <div class="tool-title">{{ tool.name }}</div>
                      <div class="tool-desc">{{ tool.description }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="preview-card">
            <div class="preview-header">
              <h3>评价信息</h3>
            </div>
            
            <div class="preview-body">
              <div class="info-item">
                <div class="info-label">实施建议：</div>
                <div class="info-value">{{ customResult.implementation }}</div>
              </div>
              
              <div class="info-item">
                <div class="info-label">结果分析：</div>
                <div class="info-value">{{ customResult.analysis }}</div>
              </div>
              
              <div class="info-item">
                <div class="info-label">注意事项：</div>
                <div class="info-value">
                  <div v-for="(note, index) in customResult.notes" :key="index" class="note-item">
                    {{ index + 1 }}. {{ note }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        
        <!-- 其他资源类型预览 -->
        <template v-else>
          <div class="preview-card">
            <div class="preview-header">
              <h3>资源预览</h3>
            </div>
            
            <div class="preview-body">
              <div class="generic-preview">
                <div class="generic-section">
                  <h4 class="generic-section-title">资源描述</h4>
                  <div class="generic-section-content">{{ customResult.description }}</div>
                </div>
                
                <div class="generic-section">
                  <h4 class="generic-section-title">资源内容</h4>
                  <div class="generic-section-content">{{ customResult.content }}</div>
                </div>
                
                <div class="generic-section">
                  <h4 class="generic-section-title">适用对象</h4>
                  <div class="generic-section-content">{{ getAudienceLabel() }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="preview-card">
            <div class="preview-header">
              <h3>资源信息</h3>
            </div>
            
            <div class="preview-body">
              <div class="info-item">
                <div class="info-label">使用建议：</div>
                <div class="info-value">{{ customResult.usageSuggestions }}</div>
              </div>
              
              <div class="info-item">
                <div class="info-label">附加说明：</div>
                <div class="info-value">{{ customResult.additionalInfo || '无' }}</div>
              </div>
            </div>
          </div>
        </template>
      </div>
      
      <div class="result-actions">
        <button class="action-btn edit" @click="editResource">编辑</button>
        <button class="action-btn save" @click="saveResource">保存</button>
        <button class="action-btn export" @click="exportResource">导出</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useResourceStore } from '../../stores/resourceStore'
import apiService from '../../api'

const router = useRouter()
const resourceStore = useResourceStore()

// 资源类型选项
const resourceTypes = [
  { label: '课件', value: 'courseware', icon: '📊' },
  { label: '讲义', value: 'handout', icon: '📝' },
  { label: '教学计划', value: 'plan', icon: '📅' },
  { label: '评价工具', value: 'evaluation', icon: '📊' },
  { label: '其他', value: 'other', icon: '📦' }
]

// 学科选项
const subjects = [
  { label: '数学', value: 'math' },
  { label: '语文', value: 'chinese' },
  { label: '英语', value: 'english' },
  { label: '物理', value: 'physics' },
  { label: '化学', value: 'chemistry' },
  { label: '生物', value: 'biology' },
  { label: '历史', value: 'history' },
  { label: '地理', value: 'geography' },
  { label: '政治', value: 'politics' },
  { label: '信息技术', value: 'it' }
]

// 难度级别选项
const difficultyLevels = [
  { label: '初级', value: 'basic' },
  { label: '中级', value: 'intermediate' },
  { label: '高级', value: 'advanced' }
]

// 表单数据
const formData = ref({
  title: '',
  resourceType: '',
  description: '',
  additionalInfo: '',
  
  // 课件特有字段
  format: '',
  topic: '',
  outline: [''],
  style: '',
  
  // 讲义特有字段
  subject: '',
  keyPoints: [],
  difficulty: '',
  includeDefinitions: true,
  includeExamples: true,
  includePractice: true,
  includeReferences: false,
  
  // 教学计划特有字段
  planType: '',
  goals: [''],
  audience: '',
  methods: {
    lecture: false,
    discussion: false,
    experiment: false,
    inquiry: false,
    cooperative: false
  },
  
  // 评价工具特有字段
  evaluationType: '',
  evaluationTarget: '',
  dimensions: [
    { name: '', weight: 20 }
  ],
  
  // 其他资源类型字段
  content: ''
})

// 状态变量
const isGenerating = ref(false)
const customResult = ref(null)
const newKeyPoint = ref('')

// 表单验证
const isFormValid = computed(() => {
  // 基本验证
  const basicValid = (
    formData.value.title.trim() !== '' &&
    formData.value.resourceType !== '' &&
    formData.value.description.trim() !== ''
  )
  
  // 根据资源类型进行特定验证
  if (formData.value.resourceType === 'courseware') {
    return basicValid && 
      formData.value.format !== '' && 
      formData.value.topic.trim() !== '' && 
      formData.value.outline.every(item => item.trim() !== '') &&
      formData.value.style !== ''
  } else if (formData.value.resourceType === 'handout') {
    return basicValid && 
      formData.value.subject !== '' && 
      formData.value.keyPoints.length > 0 && 
      formData.value.difficulty !== ''
  } else if (formData.value.resourceType === 'plan') {
    return basicValid && 
      formData.value.planType !== '' && 
      formData.value.subject !== '' && 
      formData.value.goals.every(goal => goal.trim() !== '') &&
      formData.value.audience !== '' &&
      Object.values(formData.value.methods).some(method => method === true)
  } else if (formData.value.resourceType === 'evaluation') {
    return basicValid && 
      formData.value.evaluationType !== '' && 
      formData.value.evaluationTarget !== '' && 
      formData.value.dimensions.every(dim => dim.name.trim() !== '' && dim.weight > 0) &&
      Object.values(formData.value.methods).some(method => method === true)
  } else {
    return basicValid && 
      formData.value.content.trim() !== '' && 
      formData.value.audience !== ''
  }
})

// 选择资源类型
const selectResourceType = (type) => {
  formData.value.resourceType = type
  
  // 重置特定字段
  if (type === 'courseware') {
    formData.value.outline = ['第一部分', '第二部分', '第三部分']
  } else if (type === 'plan') {
    formData.value.goals = ['使学生理解...', '培养学生...']
  } else if (type === 'evaluation') {
    formData.value.dimensions = [
      { name: '知识掌握', weight: 40 },
      { name: '技能应用', weight: 30 },
      { name: '态度表现', weight: 30 }
    ]
  }
}

// 大纲项操作
const addOutlineItem = () => {
  formData.value.outline.push('')
}

const removeOutlineItem = (index) => {
  formData.value.outline.splice(index, 1)
}

// 知识点操作
const addKeyPoint = () => {
  if (newKeyPoint.value.trim() !== '' && !formData.value.keyPoints.includes(newKeyPoint.value.trim())) {
    formData.value.keyPoints.push(newKeyPoint.value.trim())
    newKeyPoint.value = ''
  }
}

const removeKeyPoint = (index) => {
  formData.value.keyPoints.splice(index, 1)
}

// 教学目标操作
const addGoal = () => {
  formData.value.goals.push('')
}

const removeGoal = (index) => {
  formData.value.goals.splice(index, 1)
}

// 评价维度操作
const addDimension = () => {
  // 计算剩余权重
  const totalWeight = formData.value.dimensions.reduce((sum, dim) => sum + dim.weight, 0)
  const remainingWeight = Math.max(0, 100 - totalWeight)
  
  formData.value.dimensions.push({
    name: '',
    weight: remainingWeight > 0 ? remainingWeight : 10
  })
  
  // 调整权重以确保总和为100%
  adjustDimensionWeights()
}

const removeDimension = (index) => {
  formData.value.dimensions.splice(index, 1)
  
  // 调整权重以确保总和为100%
  adjustDimensionWeights()
}

const adjustDimensionWeights = () => {
  const totalWeight = formData.value.dimensions.reduce((sum, dim) => sum + dim.weight, 0)
  
  if (totalWeight !== 100 && formData.value.dimensions.length > 0) {
    // 计算需要调整的权重
    const diff = 100 - totalWeight
    const adjustPerDimension = diff / formData.value.dimensions.length
    
    // 调整每个维度的权重
    formData.value.dimensions.forEach(dim => {
      dim.weight = Math.max(1, Math.round(dim.weight + adjustPerDimension))
    })
    
    // 处理舍入误差
    const newTotal = formData.value.dimensions.reduce((sum, dim) => sum + dim.weight, 0)
    if (newTotal !== 100 && formData.value.dimensions.length > 0) {
      formData.value.dimensions[0].weight += (100 - newTotal)
    }
  }
}

// 获取资源类型标签
const getResourceTypeLabel = () => {
  if (!customResult.value) return ''
  const type = resourceTypes.find(t => t.value === customResult.value.resourceType)
  return type ? type.label : ''
}

// 获取格式标签
const getFormatLabel = () => {
  if (!customResult.value || customResult.value.resourceType !== 'courseware') return ''
  
  const formats = {
    'ppt': 'PowerPoint',
    'word': 'Word文档',
    'pdf': 'PDF文档',
    'html': 'HTML网页'
  }
  
  return formats[customResult.value.format] || ''
}

// 获取风格标签
const getStyleLabel = () => {
  if (!customResult.value || customResult.value.resourceType !== 'courseware') return ''
  
  const styles = {
    'academic': '学术型',
    'concise': '简洁型',
    'visual': '图文并茂型',
    'interactive': '互动型'
  }
  
  return styles[customResult.value.style] || ''
}

// 获取学科标签
const getSubjectLabel = () => {
  if (!customResult.value) return ''
  const subject = subjects.find(s => s.value === customResult.value.subject)
  return subject ? subject.label : ''
}

// 获取难度标签
const getDifficultyLabel = () => {
  if (!customResult.value || customResult.value.resourceType !== 'handout') return ''
  
  const difficulties = {
    'basic': '初级',
    'intermediate': '中级',
    'advanced': '高级'
  }
  
  return difficulties[customResult.value.difficulty] || ''
}

// 获取计划类型标签
const getPlanTypeLabel = () => {
  if (!customResult.value || customResult.value.resourceType !== 'plan') return ''
  
  const planTypes = {
    'lesson': '单课时教案',
    'unit': '单元教学计划',
    'semester': '学期教学计划',
    'activity': '教学活动设计'
  }
  
  return planTypes[customResult.value.planType] || ''
}

// 获取教学对象标签
const getAudienceLabel = () => {
  if (!customResult.value) return ''
  
  const audiences = {
    'primary': '小学生',
    'junior': '初中生',
    'senior': '高中生',
    'college': '大学生',
    'teacher': '教师',
    'adult': '成人教育'
  }
  
  return audiences[customResult.value.audience] || ''
}

// 获取评价类型标签
const getEvaluationTypeLabel = () => {
  if (!customResult.value || customResult.value.resourceType !== 'evaluation') return ''
  
  const evaluationTypes = {
    'diagnostic': '诊断性评价',
    'formative': '形成性评价',
    'summative': '总结性评价',
    'performance': '表现性评价'
  }
  
  return evaluationTypes[customResult.value.evaluationType] || ''
}

// 获取评价对象标签
const getEvaluationTargetLabel = () => {
  if (!customResult.value || customResult.value.resourceType !== 'evaluation') return ''
  
  const evaluationTargets = {
    'student': '学生',
    'teacher': '教师',
    'course': '课程',
    'activity': '教学活动'
  }
  
  return evaluationTargets[customResult.value.evaluationTarget] || ''
}

// 生成资源
const generateResource = async () => {
  try {
    isGenerating.value = true
    
    // 准备请求参数
    const params = {
      title: formData.value.title,
      resourceType: formData.value.resourceType,
      description: formData.value.description,
      additionalInfo: formData.value.additionalInfo.trim() || undefined
    }
    
    // 根据资源类型添加特定参数
    if (formData.value.resourceType === 'courseware') {
      params.format = formData.value.format
      params.topic = formData.value.topic
      params.outline = formData.value.outline.filter(item => item.trim() !== '')
      params.style = formData.value.style
    } else if (formData.value.resourceType === 'handout') {
      params.subject = formData.value.subject
      params.keyPoints = formData.value.keyPoints
      params.difficulty = formData.value.difficulty
      params.includeDefinitions = formData.value.includeDefinitions
      params.includeExamples = formData.value.includeExamples
      params.includePractice = formData.value.includePractice
      params.includeReferences = formData.value.includeReferences
    } else if (formData.value.resourceType === 'plan') {
      params.planType = formData.value.planType
      params.subject = formData.value.subject
      params.goals = formData.value.goals.filter(goal => goal.trim() !== '')
      params.audience = formData.value.audience
      params.methods = formData.value.methods
    } else if (formData.value.resourceType === 'evaluation') {
      params.evaluationType = formData.value.evaluationType
      params.evaluationTarget = formData.value.evaluationTarget
      params.dimensions = formData.value.dimensions.filter(dim => dim.name.trim() !== '')
      params.methods = formData.value.methods
    } else {
      params.content = formData.value.content
      params.audience = formData.value.audience
    }
    
    // 调用API生成资源
    // 实际项目中应该调用后端API
    // const response = await apiService.custom.generate(params)
    
    // 模拟API响应
    await new Promise(resolve => setTimeout(resolve, 3000))
    
    // 模拟返回数据
    let mockResponse = {
      id: 'custom_' + Date.now(),
      title: params.title,
      resourceType: params.resourceType,
      description: params.description,
      additionalInfo: params.additionalInfo,
      createdAt: new Date().toLocaleString()
    }
    
    // 根据资源类型添加特定响应数据
    if (params.resourceType === 'courseware') {
      mockResponse = {
        ...mockResponse,
        format: params.format,
        topic: params.topic,
        style: params.style,
        outline: params.outline.map(title => ({
          title,
          content: [
            '内容点1',
            '内容点2',
            '内容点3'
          ]
        })),
        usageSuggestions: '建议在课前分发给学生预习，或在课堂上作为教学辅助材料使用。可以根据实际教学需求调整内容深度和广度。'
      }
    } else if (params.resourceType === 'handout') {
      mockResponse = {
        ...mockResponse,
        subject: params.subject,
        keyPoints: params.keyPoints,
        difficulty: params.difficulty,
        includeDefinitions: params.includeDefinitions,
        includeExamples: params.includeExamples,
        includePractice: params.includePractice,
        includeReferences: params.includeReferences,
        overview: `本讲义涵盖了${params.keyPoints.join('、')}等核心知识点，适合${getDifficultyLabel()}水平的学习者使用。`,
        definitions: params.includeDefinitions ? [
          { term: params.keyPoints[0] || '概念1', description: '这是概念1的详细解释...' },
          { term: params.keyPoints[1] || '概念2', description: '这是概念2的详细解释...' }
        ] : [],
        examples: params.includeExamples ? [
          { question: '这是一个关于' + (params.keyPoints[0] || '知识点') + '的例题...', solution: '解题思路和过程...' },
          { question: '这是另一个例题...', solution: '解题思路和过程...' }
        ] : [],
        practice: params.includePractice ? [
          '练习题1：...',
          '练习题2：...',
          '练习题3：...'
        ] : [],
        references: params.includeReferences ? [
          '参考书籍1',
          '参考文献2',
          '网络资源3'
        ] : []
      }
    } else if (params.resourceType === 'plan') {
      mockResponse = {
        ...mockResponse,
        planType: params.planType,
        subject: params.subject,
        goals: params.goals,
        audience: params.audience,
        methods: params.methods,
        contents: [
          { title: '内容模块1', description: '这部分内容涵盖...' },
          { title: '内容模块2', description: '这部分内容涵盖...' }
        ],
        steps: [
          { 
            title: '导入阶段', 
            description: '通过提问和演示引入新课题...',
            activities: ['活动1：...', '活动2：...']
          },
          { 
            title: '讲解阶段', 
            description: '系统讲解核心概念和方法...',
            activities: ['活动1：...', '活动2：...']
          },
          { 
            title: '练习阶段', 
            description: '学生进行个人或小组练习...',
            activities: ['活动1：...', '活动2：...']
          },
          { 
            title: '总结评价', 
            description: '归纳本节课重点，布置作业...',
            activities: ['活动1：...', '活动2：...']
          }
        ],
        resources: [
          '教材第X章',
          '多媒体课件',
          '练习题册',
          '实验器材'
        ],
        evaluation: '通过课堂观察、提问、练习完成情况等方式评价学生学习效果。'
      }
    } else if (params.resourceType === 'evaluation') {
      mockResponse = {
        ...mockResponse,
        evaluationType: params.evaluationType,
        evaluationTarget: params.evaluationTarget,
        methods: params.methods,
        purpose: `本评价工具旨在${params.evaluationType === 'diagnostic' ? '诊断' : params.evaluationType === 'formative' ? '形成性评估' : params.evaluationType === 'summative' ? '总结性评估' : '表现性评估'}${params.evaluationTarget === 'student' ? '学生' : params.evaluationTarget === 'teacher' ? '教师' : params.evaluationTarget === 'course' ? '课程' : '教学活动'}的${params.dimensions.map(d => d.name).join('、')}等方面。`,
        dimensions: params.dimensions.map(dim => ({
          ...dim,
          criteria: [
            `${dim.name}评价标准1`,
            `${dim.name}评价标准2`,
            `${dim.name}评价标准3`
          ]
        })),
        tools: [
          { 
            name: '评价表格', 
            description: '包含各维度的评分标准和记录表格'
          },
          { 
            name: '观察记录单', 
            description: '用于记录观察到的关键行为和表现'
          },
          { 
            name: '反馈问卷', 
            description: '收集评价对象的自我评价和反馈信息'
          }
        ],
        implementation: '建议在评价前向相关人员说明评价目的和方法，确保评价过程客观公正，评价后及时反馈结果并提出改进建议。',
        analysis: '评价结果可通过量化统计和质性分析相结合的方式进行处理，形成评价报告，为后续改进提供依据。',
        notes: [
          '评价过程应尊重评价对象，保护隐私',
          '避免主观偏见，保持评价的客观性',
          '评价结果应用于改进而非简单判断优劣',
          '定期检视评价工具本身的有效性'
        ]
      }
    } else {
      mockResponse = {
        ...mockResponse,
        content: params.content,
        audience: params.audience,
        usageSuggestions: '根据实际教学需求灵活使用本资源，可以根据学生反馈进行适当调整和补充。'
      }
    }
    
    // 设置结果
    customResult.value = mockResponse
    
    // 保存到状态管理
    resourceStore.setCustomData(mockResponse)
    
  } catch (error) {
    console.error('生成资源失败:', error)
    // 可以在这里添加错误提示
  } finally {
    isGenerating.value = false
  }
}

// 编辑资源
const editResource = () => {
  // 将当前结果数据填充到表单中
  formData.value.title = customResult.value.title
  formData.value.resourceType = customResult.value.resourceType
  formData.value.description = customResult.value.description
  formData.value.additionalInfo = customResult.value.additionalInfo || ''
  
  // 根据资源类型填充特定字段
  if (customResult.value.resourceType === 'courseware') {
    formData.value.format = customResult.value.format
    formData.value.topic = customResult.value.topic
    formData.value.style = customResult.value.style
    formData.value.outline = customResult.value.outline.map(item => item.title)
  } else if (customResult.value.resourceType === 'handout') {
    formData.value.subject = customResult.value.subject
    formData.value.keyPoints = [...customResult.value.keyPoints]
    formData.value.difficulty = customResult.value.difficulty
    formData.value.includeDefinitions = customResult.value.includeDefinitions
    formData.value.includeExamples = customResult.value.includeExamples
    formData.value.includePractice = customResult.value.includePractice
    formData.value.includeReferences = customResult.value.includeReferences
  } else if (customResult.value.resourceType === 'plan') {
    formData.value.planType = customResult.value.planType
    formData.value.subject = customResult.value.subject
    formData.value.goals = [...customResult.value.goals]
    formData.value.audience = customResult.value.audience
    formData.value.methods = {...customResult.value.methods}
  } else if (customResult.value.resourceType === 'evaluation') {
    formData.value.evaluationType = customResult.value.evaluationType
    formData.value.evaluationTarget = customResult.value.evaluationTarget
    formData.value.dimensions = customResult.value.dimensions.map(dim => ({
      name: dim.name,
      weight: dim.weight
    }))
    formData.value.methods = {...customResult.value.methods}
  } else {
    formData.value.content = customResult.value.content
    formData.value.audience = customResult.value.audience
  }
  
  // 清空结果，返回编辑状态
  customResult.value = null
}

// 保存资源
const saveResource = async () => {
  try {
    // 调用API保存资源
    // 实际项目中应该调用后端API
    // await apiService.resource.save({
    //   type: 'custom',
    //   data: customResult.value
    // })
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 显示成功提示
    alert('资源已保存到资源库')
    
  } catch (error) {
    console.error('保存资源失败:', error)
    // 可以在这里添加错误提示
  }
}

// 导出资源
const exportResource = async () => {
  try {
    // 调用API导出资源
    // 实际项目中应该调用后端API
    // const response = await apiService.custom.export(customResult.value.id)
    // 
    // // 创建下载链接
    // const url = window.URL.createObjectURL(new Blob([response]))
    // const link = document.createElement('a')
    // link.href = url
    // link.setAttribute('download', `${customResult.value.title}.pdf`)
    // document.body.appendChild(link)
    // link.click()
    // document.body.removeChild(link)
    
    // 模拟导出功能
    alert('导出功能在实际项目中需要后端支持')
    
  } catch (error) {
    console.error('导出资源失败:', error)
    // 可以在这里添加错误提示
  }
}

// 页面加载时检查是否有已生成的资源数据
onMounted(() => {
  const savedCustom = resourceStore.getCustomData
  if (savedCustom && savedCustom.title) {
    customResult.value = savedCustom
  }
})
</script>

<style scoped>
.custom-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  font-size: 1.8rem;
  margin-bottom: 24px;
  color: #333;
  font-weight: 600;
}

/* 输入区样式 */
.input-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: #4b6cb7;
  outline: none;
}

/* 资源类型选择器样式 */
.resource-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.type-item {
  flex: 1 0 calc(20% - 12px);
  min-width: 120px;
  padding: 16px;
  border-radius: 8px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.type-item:hover {
  background-color: #e6f0ff;
}

.type-item.active {
  background-color: #4b6cb7;
  color: white;
}

.type-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.type-name {
  font-weight: 500;
}

/* 动态表单字段样式 */
.dynamic-fields {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed #ddd;
}

/* 大纲编辑器样式 */
.outline-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.outline-item {
  display: flex;
  gap: 8px;
}

.outline-item input {
  flex: 1;
}

.remove-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #666;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
}

.remove-btn:hover {
  background-color: #ffebee;
  color: #e53935;
  border-color: #e53935;
}

.add-btn {
  padding: 8px;
  background-color: #f0f5ff;
  color: #4b6cb7;
  border: 1px dashed #4b6cb7;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.add-btn:hover {
  background-color: #e6f0ff;
}

/* 标签输入样式 */
.tags-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  padding: 6px 10px;
  background-color: #e6f0ff;
  color: #4b6cb7;
  border-radius: 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.remove-tag {
  cursor: pointer;
  font-weight: bold;
}

.tag-input-container {
  display: flex;
  gap: 8px;
}

.tag-input-container input {
  flex: 1;
}

.add-tag-btn {
  padding: 8px 16px;
  background-color: #f0f5ff;
  color: #4b6cb7;
  border: 1px solid #4b6cb7;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.add-tag-btn:hover {
  background-color: #4b6cb7;
  color: white;
}

/* 难度选择器样式 */
.difficulty-selector {
  display: flex;
  gap: 12px;
}

.difficulty-item {
  flex: 1;
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.difficulty-item:hover {
  background-color: #f5f5f5;
}

.difficulty-item.active {
  background-color: #4b6cb7;
  color: white;
  border-color: #4b6cb7;
}

/* 复选框组样式 */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: auto;
}

/* 评价维度编辑器样式 */
.dimensions-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dimension-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dimension-name {
  flex: 1;
}

.dimension-weight {
  width: 80px;
}

.weight-percent {
  margin-right: 8px;
}

/* 生成按钮样式 */
.generate-btn {
  width: 100%;
  padding: 12px;
  background-color: #4b6cb7;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.generate-btn:hover {
  background-color: #3b5998;
}

.generate-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* 加载状态样式 */
.loading-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(75, 108, 183, 0.1);
  border-radius: 50%;
  border-top-color: #4b6cb7;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loading-hint {
  color: #888;
  font-size: 0.9rem;
  margin-top: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 结果预览区样式 */
.result-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.result-header {
  margin-bottom: 24px;
}

.result-title {
  font-size: 1.5rem;
  margin: 0 0 12px 0;
  color: #333;
  font-weight: 600;
}

.result-meta {
  display: flex;
  gap: 16px;
  color: #666;
  font-size: 0.9rem;
}

/* 预览卡片样式 */
.preview-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}

.preview-header {
  padding: 12px 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

.preview-format,
.preview-subject,
.preview-target {
  font-size: 0.9rem;
  color: #666;
}

.preview-body {
  padding: 16px;
}

/* 课件预览样式 */
.courseware-preview {
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.slide-preview {
  padding: 20px;
  background-color: #f9f9f9;
}

.slide-title {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.slide-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slide-item {
  margin-bottom: 12px;
}

.slide-item-title {
  font-weight: 500;
  margin-bottom: 8px;
  color: #4b6cb7;
}

.slide-item-content {
  padding-left: 20px;
}

.slide-point {
  margin-bottom: 6px;
  color: #555;
}

/* 讲义预览样式 */
.handout-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.handout-section-title {
  font-size: 1.1rem;
  margin: 0 0 12px 0;
  color: #4b6cb7;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.definition-item {
  margin-bottom: 12px;
}

.definition-term {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.definition-desc {
  color: #555;
  padding-left: 16px;
}

.example-item {
  margin-bottom: 16px;
}

.example-question {
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.example-solution {
  color: #555;
  padding-left: 16px;
}

.practice-item {
  margin-bottom: 8px;
  color: #555;
}

/* 教学计划预览样式 */
.plan-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plan-section-title {
  font-size: 1.1rem;
  margin: 0 0 12px 0;
  color: #4b6cb7;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.goal-item,
.content-item,
.step-item,
.activity-item {
  margin-bottom: 8px;
}

.content-title,
.step-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.content-desc,
.step-desc {
  color: #555;
  margin-bottom: 8px;
}

.step-activities {
  padding-left: 16px;
  color: #555;
}

/* 评价工具预览样式 */
.evaluation-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.evaluation-section-title {
  font-size: 1.1rem;
  margin: 0 0 12px 0;
  color: #4b6cb7;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.dimensions-table {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.dimensions-header {
  display: flex;
  background-color: #f5f5f5;
  font-weight: 500;
  color: #333;
}

.dimension-row {
  display: flex;
  border-top: 1px solid #ddd;
}

.dimension-cell,
.weight-cell,
.criteria-cell {
  padding: 10px;
}

.dimension-cell {
  flex: 2;
  border-right: 1px solid #ddd;
}

.weight-cell {
  flex: 1;
  border-right: 1px solid #ddd;
  text-align: center;
}

.criteria-cell {
  flex: 4;
}

.criterion-item {
  margin-bottom: 4px;
}

.tool-item {
  margin-bottom: 12px;
}

.tool-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.tool-desc {
  color: #555;
}

/* 信息项样式 */
.info-item {
  display: flex;
  margin-bottom: 16px;
}

.info-label {
  width: 100px;
  font-weight: 500;
  color: #555;
}

.info-value {
  flex: 1;
  color: #333;
}

.outline-list-item,
.reference-item,
.resource-item,
.note-item {
  margin-bottom: 4px;
}

/* 标签列表样式 */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 10px;
  background-color: #e6f0ff;
  color: #4b6cb7;
  border-radius: 16px;
  font-size: 0.85rem;
}

/* 结果操作按钮样式 */
.result-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

.action-btn.edit {
  background-color: #f5f5f5;
  color: #666;
}

.action-btn.edit:hover {
  background-color: #e0e0e0;
}

.action-btn.save {
  background-color: #4b6cb7;
  color: white;
}

.action-btn.save:hover {
  background-color: #3b5998;
}

.action-btn.export {
  background-color: #f0f5ff;
  color: #4b6cb7;
  border: 1px solid #4b6cb7;
}

.action-btn.export:hover {
  background-color: #e6f0ff;
}

/* 响应式调整 */
@media (max-width: 600px) {
  .resource-type-selector {
    flex-direction: column;
  }
  
  .type-item {
    flex: 1 0 100%;
  }
  
  .difficulty-selector {
    flex-direction: column;
    gap: 8px;
  }
  
  .checkbox-group {
    flex-direction: column;
    gap: 12px;
  }
  
  .result-actions {
    flex-wrap: wrap;
  }
  
  .action-btn {
    flex: 1 0 calc(50% - 6px);
  }
  
  .info-item {
    flex-direction: column;
    gap: 4px;
  }
  
  .info-label {
    width: 100%;
  }
  
  .dimensions-header,
  .dimension-row {
    flex-direction: column;
  }
  
  .dimension-cell,
  .weight-cell {
    border-right: none;
    border-bottom: 1px solid #ddd;
  }
}
</style>